<template>
    <div>
        门店选择: <select v-model="page.mid">
                    <option value="0">请选择</option>
                    <option v-for="b in Mens" :value="b.mid">{{b.mname}}</option>
                </select>
        卡劵名称: <input type="text" placeholder="请输入" v-model="page.name">
        卡劵类型: <select v-model="page.tid">
                    <option value="0">请选择</option>
                    <option v-for="b in Types" :value="b.tid">{{b.typeName}}</option>
                </select>
        状态:<select v-model="page.zt">
                    <option value="">请选择</option>
                    <option value="true">上架</option>
                    <option value="false">下架</option>
                </select>
                    
                <input type="button" value="查询" @click="Show" class="btn btn-success">
                <input type="button" value="重置" @click="Chongzhi" class="btn btn-success">
                <input type="button" value="批量下架" @click="Xiajia">
                
        <table class="table">
            <thead>
                <tr>
                    <td><input type="checkbox" v-model="Quanxuan" @click="Fucxuan"></td>
                    <td>卡劵名称</td>
                    <td>卡劵类型</td>
                    <td>门店图片</td>
                    <td>适用范围</td>
                    <td>适用日期</td>
                    <td>有效期</td>
                    <td>价格(元)</td>
                    <td>排序</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <td><input type="checkbox" v-model="Quanbu" :value="a.hid"></td>
                    <td>{{a.kjName}}</td>
                    <td>{{a.typeName}}</td>
                    <td><img :src="'https://localhost:7008/'+a.img" style="width: 60px; height: 60px;"></td>
                    <td>{{a.mname}}</td>
                    <td>{{a.times}}</td>
                    <td>{{a.yxTimes}}</td>
                    <td>{{a.price}}</td>
                    <td>{{a.hid}}</td>
                    <td>{{a.zt?"上架":"下架"}}</td>
                    <td>
                        <input type="button" value="编辑" @click="Update(a.hid)">
                        <input type="button" value="删除" @click="DeleteHotel(a.hid)">
                        <input v-if="a.zt==false" type="button" value="上架" @click="Xiajia2(a.hid)">
                        <input v-else type="button" value="下架" @click="Xiajia2(a.hid)">
                    </td>
                </tr>
            </tbody>
        </table>
        共{{pagec.pageend}}页,共{{pagec.pagecount}}行,第{{page.pageinex}}页,每页有{{page.pagesise}}行 <br>
        <input type="button" value="首页" @click="Fanye(1)">
        <input type="button" value="上一页" @click="Fanye(2)">
        <span v-for="a in pagec.pageend">
            <input type="button" :value="a" @click="Fanye2(a)">
        </span>
        <input type="button" value="下一页" @click="Fanye(3)">
        <input type="button" value="尾页" @click="Fanye(4)">

        <input type="text" v-model="page.pageinex"><input type="button" value="跳转页码" @click="Tianzhuan">

        <select v-model="page.pagesise" @change="Show">
            <option value="1">每页1条</option>
            <option value="3">每页3条</option>
            <option value="5">每页5条</option>
            <option value="7">每页7条</option>
            <option value="10">每页10条</option>
        </select>

    </div>
</template>

<script setup lang="ts">

import {ref,onMounted} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router = useRouter();

onMounted(() => {
    Show()
    Men()
    Type()
})

const Update=(gid:any)=>{
    router.push({path:"/Update",query:{id:gid}});
}




const Quanxuan = ref(false)
const Quanbu = ref([])

const Fucxuan=()=>{

            if(Quanxuan.value)
        {
            Quanbu.value=[]
        }
        else{
            

            data.value.forEach(a=>{
                Quanbu.value.push(a.hid);
            })
        }

}









const Fanye2=(man:any)=>{
    page.value.pageinex=man
    Show()
}

const Tianzhuan=()=>{
    if(page.value.pageinex>pagec.value.pageend||page.value.pageinex<1)
{
    alert("跳转页码不能小于1或大于总页数");
    return;
}
    Show()
}


const Fanye=(min:any)=>{
    if(min==1)
{
    page.value.pageinex=1
}
if(min==2)
{
    if(page.value.pageinex>1)
{
    page.value.pageinex-=1
}
    
}
if(min==3)
{
    if(page.value.pageinex<pagec.value.pageend)
{
    page.value.pageinex+=1
}
    
}
if(min==4)
{
    page.value.pageinex=pagec.value.pageend
}
Show()
}




const data = ref([
{
      "tid": 1,
      "hid": 11,
      "mid": 3,
      "img": "/img/3.jpg",
      "luoji": true,
      "kjName": "暑假优惠卷",
      "yxTimes": "购买两个小时后",
      "price": "28",
      "times": "周一,二,三,四,五",
      "zt": true,
      "mname": "门店3",
      "typeName": "时长卡"
    }
])

const page = ref(
    {
        mid:0,
        name:"",
        tid:0,
        zt:"",
        pageinex : 1,
        pagesise : 5

    }
)
///总行数  总页数
const pagec = ref(
    {
        pagecount:0,
        pageend:0
    }
)


const Chongzhi=()=>{
       page.value.mid=0,
       page.value.name="",
       page.value.tid=0,
       page.value.zt=""
}


const Mens = ref([
{
    "mid": 1,
    "mname": "门店1"
  }
]);
const Types = ref([
{
    "tid": 1,
    "typeName": "时长卡"
  }
]);

const Show=()=>{
    console.log(page.value);
    axios.get("https://localhost:7008/api/Hotel/FenyeShow",{params:page.value}).then(res=>{
        data.value=res.data.list;
        pagec.value.pagecount = res.data.num;
        pagec.value.pageend = Math.ceil(pagec.value.pagecount/page.value.pagesise);
    })
}
const Men=()=>{
    axios.get("https://localhost:7008/api/Hotel/ChaMendian").then(res=>{
        Mens.value=res.data;
    })
}
const Type=()=>{
    axios.get("https://localhost:7008/api/Hotel/ChaType").then(res=>{
        Types.value=res.data;
    })
}

const DeleteHotel=(mid:any)=>{
    if(!confirm("确认删除吗?"))
{
return;
}
    axios.get("https://localhost:7008/api/Hotel/DeleteHotel",{params:{id:mid}}).then(res=>{
        if(res.data>0)
    {
            alert("删除成功");
            Show()
    }
    else{
        alert("删除失败");
    }
    })
}

const Xiajia=(gid:any)=>{
    if(!confirm("确认修改吗?"))
{
return;
}
    axios.get("https://localhost:7008/api/Hotel/Xiajia",{params:{id:Quanbu.value.toString()}}).then(res=>{
       
        if(res.data>0)
    {
            alert("修改成功");
            Show()
    }
    else{
        alert("修改失败");
    }
    
    })
}

const Xiajia2=(gid:any)=>{
    if(!confirm("确认修改吗?"))
{
return;
}
    axios.get("https://localhost:7008/api/Hotel/xiajiadan",{params:{fid:gid}}).then(res=>{
       
        if(res.data>0)
    {
            alert("修改成功");
            Show()
    }
    else{
        alert("修改失败");
    }
    
    })
}



</script>

<style scoped>

</style>